<template>
	<el-select v-model="model" multiple collapse-tags clearable @change="handleChange">
	    <el-option
	      v-for="(item,index) in statusList"
	      :key="index"
	      :label="item.label"
	      :value="item.value"
		  >
	    </el-option>
	</el-select>
</template>
<script setup lang="ts" name="vpStatusMultSelect">
import { computed } from 'vue'

    const emits = defineEmits(['change']);

    const props = defineProps({
        // 用于替换默认的状态描述
        statusDesc: {
            type: Object,
            required: false,
        },
        // 可选范围
        optional: {
            type: Array,
            default: [10, 88, 89, 98],
            required: false,
        },
    });

    const model = defineModel();

    const defaultStatusMap = {
        10 : {zh: '草稿', en: 'Draft'},
        20 : {zh: '提交', en: 'Submit'},
        88 : {zh: '审批中', en: 'Processing'},
        89 : {zh: '已审批', en: 'Processed'},
        98 : {zh: '作废', en: 'Invalid'},
        99 : {zh: '关闭', en: 'Closed'},
    };

    const statusList = computed(() => {
        const statusMap = {
            ...defaultStatusMap,
            ...props.statusDesc,
        }

        const list = Object.entries(statusMap).map(([key, value]) => {
            return {
                value: parseInt(key),
                label: value.zh + ' ' + value.en,
            };
        });

        return list.filter((obj: any) => {
            return props.optional.includes(obj.value);
        });
    })

    const handleChange = (data:any)=>{
        emits("change", data);
    }
</script>
